// 设置搜索结果组件
// 显示搜索到的设置项

import React from 'react';
import { Search } from 'lucide-react';
import { useSettingsStore } from '../../stores/settingsStore';
import { SettingItem } from './components/SettingItem';

export const SettingsSearchResults: React.FC = () => {
  const { searchQuery, searchResults } = useSettingsStore();

  if (!searchQuery) {
    return null;
  }

  return (
    <div className="p-6">
      <div className="mb-6">
        <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-2">
          搜索结果
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          搜索 "{searchQuery}" 找到 {searchResults.length} 个结果
        </p>
      </div>

      {searchResults.length > 0 ? (
        <div className="space-y-6">
          {searchResults.map((result: any, index) => (
            <div key={result.setting.id} className="border-b border-gray-200 dark:border-gray-700 pb-6 last:border-b-0">
              <div className="mb-2">
                <span className="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded">
                  {getCategoryName(result.setting.category)}
                </span>
              </div>
              <SettingItem
                setting={result.setting}
                showDescription={true}
                highlightQuery={searchQuery}
              />
            </div>
          ))}
        </div>
      ) : (
        <div className="text-center py-12">
          <Search className="w-12 h-12 mx-auto text-gray-400 mb-4" />
          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
            未找到匹配的设置
          </h3>
          <p className="text-gray-600 dark:text-gray-400">
            尝试使用不同的关键词或检查拼写
          </p>
        </div>
      )}
    </div>
  );
};

// 获取分类名称的辅助函数
const getCategoryName = (category: string): string => {
  const categoryNames: Record<string, string> = {
    editor: '编辑器',
    appearance: '外观',
    keyboard: '快捷键',
    files: '文件',
    extensions: '扩展',
    advanced: '高级'
  };
  return categoryNames[category] || category;
};
